<template>
  <div id="bookListItem">
    <div>
      <img :src="item.bigImgUrl">
    </div>
    <p class="title">
      <router-link
        :to="{name:'book',params:{id:item.id}}"
        target="_blank">
        {{ item.title }}
      </router-link>
    </p>
    <p>
      <span class="factPrice">
        {{ currency(factPrice(item.price,item.discount)) }}
      </span>
      <span>
        定价：<i class="price">
          {{ currency(item.price) }}
        </i>
      </span>
    </p>
    <p>
      <span> {{ item.author }} </span>
      <span> {{ item.publishDate }} </span>
      <span> {{ item.bookConcern }} </span>
    </p>
    <p>{{item.brief}}</p>
    <p>
      <button class="addCartButton" @click="addCartItem(item)">
        加入购物车
      </button>
    </p>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name:'BookListItem',
  props:{
    item:{
      type:Object,
      default:()=>{}
    }
  },
  inject: ['factPrice', 'currency'],
  methods:{
    ...mapActions('cart',{
      addCart:'addProductToCart'
    }),
    addCartItem(item){
      let quantity = 1;
      let newItem = {
        ...item,
        price:this.factPrice(item.price,item.discount),
        quantity
      };
      this.addCart(newItem);
      this.$router.push("/cart");
    }
  }
}
</script>

<style scoped>
.bookListItem {
  border-bottom: solid 1px #ccc;
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 30px;
}
.bookListItem p{
  text-align: left;
}
.bookListItem p span{
  padding-left: 10px;
}
.bookListItem img{
  width: 180px;
  height: 180px;
  float: left;
}
.addCartButton{
	padding: 5px 10px 6px;
	color: #fff;
	border: none;
	border-bottom: solid 1px #222;
	border-radius: 5px;
	box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 3px #444;
	cursor: pointer;
  background-color: #e33100;
}
.addCartButton:hover {
  text-shadow: 0 1px 1px #444;
}
.bookListItem .price {
  color: #cdcdcd;
  text-decoration: line-through;
}
.bookListItem .factPrice{
  color: red;
  font-weight: bold;
}

.bookListItem .title{
  color: #e00;
}
</style>